<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}BunnySpell{% endblock %}</title>
    <link rel="icon" type="image/png" href="{{ url_for('static', filename='bunnyspell.png') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
    <link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@400;700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap" rel="stylesheet">
    {% block styles %}{% endblock %}
    <style>
        body, input, button, select, textarea {
            font-family: 'Fredoka', sans-serif;
        }
    </style>
    {% block scripts %}{% endblock %}
</head>
<body>
    <header>
        <!-- 顶部导航栏 -->
        <div id="logo" class="logo-container">
            <a href="{{ url_for('home') }}" class="logo-link">
                <img src="{{ url_for('static', filename='bunnyspell.png') }}" alt="Logo" class="logo-img">
                <span class="logo-text">BunnySpell</span>
            </a>
        </div>

        <!-- 中间的导航按钮 -->
        <div class="header-buttons">
            {% if '/write' not in request.path %}
                <a href="{{ url_for('game_creator') }}" class="header-button"> New  </a>
                <a href="{{ url_for('game_list') }}" class="header-button">Games</a>
                <a href="{{ url_for('random_game') }}" class="header-button">Play</a>
                <a href="{{ url_for('profile') }}" class="header-button">Profile</a>
                <a href="{{ url_for('words_learned') }}" class="header-button">Words</a>    
            {% endif %}
        </div>

        <!-- 右上角显示用户名或登录按钮 -->
        <div class="user-info">
            {% if current_user.is_authenticated %}
            <a href="{{ url_for('leaderboard') }}" class="leaderboard-link">
                <img src="/static/leaderboard_icon.png" alt="Leaderboard" class="leaderboard-icon">
            </a>
                <div class="user-menu">
                    <a href="{{ url_for('user_settings') }}" class="username">Welcome, {{ current_user.username }}</a>
                </div>
                <a href="{{ url_for('logout') }}" class="logout-button" title="Logout">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
                        <polyline points="16 17 21 12 16 7"></polyline>
                        <line x1="21" y1="12" x2="9" y2="12"></line>
                    </svg>
                </a>
            {% else %}
                <a href="{{ url_for('login') }}" class="login-button">Login</a>
            {% endif %}
        </div>
    </header>

    <!-- <div class="container">
        {% with messages = get_flashed_messages(with_categories=True) %}
            {% if messages %}
                <div class="flash-messages">
                    {% for category, message in messages %}
                        <div class="flash flash-{{ category }}">{{ message }}</div>
                    {% endfor %}
                </div>
            {% endif %}
        {% endwith %} -->
        {% block content %}
        {% endblock %}
    <!-- </div> -->

    <footer class="site-footer">
        <p>Copyright &copy; {{ current_year }} bunnywise.cn 粤ICP备2024344816号</p>
    </footer>
    
</body>
</html>